/**
 * count 切片
 *
 *    1. @reduxjs/toolkit 中引入 createSlice 方法
 *        import { createSlice } from '@reduxjs/toolkit
 *
 *    2. 调用 createSlice 传递配置项，返回切片
 *
 *    3. 最后从切片中点出reducer导出。切片中点出动作创建函数导出
 */

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

const countSlice = createSlice({
  // 切片名字，全局唯一。且该 name 会作为 actionType 的前缀。
  name: "count",
  // 初始化的state数据
  initialState: {
    num: 0,
  },
  // reducers 的配置，理解为 actions 配置的感觉
  //    每一个 reducer 都会接受到两个参数，state 与 action,
  //          reducer 中由于整个RTK集成了immer.所以你可以直接操作state来修改。
  reducers: {
    /**
     * 通过  PayloadAction 来描述 action 中 payload 的类型，如果没有处理时，默认是 any
     */

    inc(state, action: PayloadAction<string>) {
      console.log("action", action);
      // 直接操作 state
      state.num++;
    },
    dec(state) {
      state.num--;
    },
  },
});
// 看一下切片对象中有什么玩意
//    关键的两个东西
//        1. actions
//            是一个对象，对象中的每一项都是一个 actionCreator(动作创建函数)
//            该对象中的内容有什么是由 reducers 配置项决定的
//            每一项 调用之后返回的就是一个同步的动作 {type: 'xxxx'}
//            通过 dispatch(actions.xxx()) 代码会执行到 reducers.xxx 这个函数中去
//            通过 dispatch(actions.xxx(payload)) 代码会执行到 reducers.xxx 这个函数中去, 对应函数中 action.payload 就是这里传递过去的 payload
//
//        2. reducer
//            需要导出给到 configureStore 去使用
// console.log("actions", countSlice.actions);
// console.log("aaa", countSlice.actions.inc()); // { type: 'count/inc' }

// 具名导出 actionCreator 给到组件去用
export const inc = countSlice.actions.inc;
export const dec = countSlice.actions.dec;

export default countSlice.reducer;
